<template>
  <el-container>
    <!-- width自适应,不然header与aside有间隔 -->
    <el-aside width="auto" v-if="this.$route.meta.hideSliderBar !== true">
      <common-aside />
    </el-aside>
    <el-container>
      <!--https://blog.csdn.net/m0_56568186/article/details/122601035-->
      <el-header v-if="this.$route.meta.hideSliderBar !== true">
        <common-header />
      </el-header>
      <!-- common-tags / -->
      <el-main :class="elMainHeight ? 'el-main-height' : 'el-main-height-all'">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import CommonAside from "@/components/CommonAside.vue";
import CommonHeader from "@/components/CommonHeader.vue";
//import CommonTags from "@/components/CommonTags.vue";
export default {
  data() {
    return {};
  },
  components: {
    CommonAside,
    CommonHeader,
    // CommonTags,
  },
  mounted() {
    console.log(this)
    console.log(this.$route.meta.hideSliderBar);
  },
  computed: {
      elMainHeight: function () {
        return this.$route.meta.hideSliderBar !== true;
      }
  }
};
</script>

<style lang="less" scoped>
.el-header {
    height: 70px !important;
    padding: 0;
}

.el-main {
    padding: 0 !important;
    
}

.el-main-height {
  height: calc(100vh - 70px);// 只用设置主体 main 高度
}

.el-main-height-all {
  height: 100vh;// 只用设置主体 main 高度
}

</style>
